<template>
	<div class="relative">
		<div class="bg-white rounded-[12px] px-4 pb-2">
			<div class="flex justify-between w-full py-1">
				<div>
					<img :src="FaultPng" class="h-[30px]" v-if="siteData?.deviceState === 30" />
					<img :src="AlarmPng" class="h-[30px]" v-if="siteData?.deviceState === 40" />
				</div>
				<el-button link icon="close" @click="emits('close')"></el-button>
			</div>
			<div class="text-[#555] text-xs">
				<div class="flex items-center pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">安装点位：</div>
					<div class="text-[#1281f3] whitespace-nowrap cursor-pointer">{{ siteData?.address }}</div>
				</div>
				<div class="flex items-start pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">详细地址：</div>
					<div class="text-[#1281f3] whitespace-nowrap cursor-pointer">{{ siteData?.detailAddress }}</div>
				</div>
				<div class="flex items-start pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">楼层名称：</div>
					<div class="whitespace-nowrap">{{ siteData?.floorName }}</div>
				</div>
				<div class="flex items-center pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">接警人员：</div>
					<div class="whitespace-nowrap">{{ siteData?.alarmWorkerName }} {{ siteData?.phone }}</div>
				</div>
				<div
					class="flex items-center flex-nowrap"
					v-if="siteData?.deivceState === 30 || siteData?.deviceState === 40 || siteData?.deviceState === 50"
					pb-1
				>
					<div class="min-w-[6em] text-right text-info">报警原因：</div>
					<div>{{ siteData?.alarmCauses || siteData?.faultCauses }}</div>
				</div>
				<div class="flex items-center pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">设备IMEI：</div>
					<div class="text-[#1281f3] whitespace-nowrap cursor-pointer" @click="handledetail(siteData.id)">{{ siteData?.imei }}</div>
					<el-button class="ml-1" icon="DocumentCopy" link type="primary" size="small" @click="copyText(siteData?.imei)"></el-button>
				</div>
				<div class="flex items-center pb-1 flex-nowrap">
					<div class="min-w-[6em] text-right text-info">设备型号：</div>
					<div class="whitespace-nowrap">{{ siteData?.deviceModelName }}</div>
				</div>
			</div>
			<div class="mt-2 text-right" v-if="siteData?.deviceState === 40">
				<el-button
					class="mb-1"
					@click="handling(item)"
					v-for="item in processTypeOptions"
					:key="item.id"
					:color="getProcess(item.processTypeLevel).value"
					plain
					>{{ item.processTypeName }}</el-button
				>
			</div>
		</div>
		<div class="flex items-center justify-center">
			<img :src="tipPng" alt="" class="w-[20px]" />
		</div>
	</div>
</template>

<script setup lang="ts" name="InfoLayer">
import tipPng from '/@/assets/analysis/tip.png';
import commonFunction from '/@/utils/commonFunction';
import AlarmPng from '/@/assets/analysis/alarm.png';
import FaultPng from '/@/assets/analysis/fault.png';
import { fetchListAll as fetchProcessTypeListAll } from '/@/api/alarm/alarmProcessType';
import { processTypeLevelOptions } from '/@/views/alarm/alarmProcessType/data';
import { useRouter } from 'vue-router';
const router = useRouter();
const { copyText } = commonFunction();
const emits = defineEmits(['close', 'handling']);
const props = defineProps({
	siteData: {
		type: Object,
		default: () => {},
	},
});
const processTypeOptions = ref<any[]>([]);

// 查询处理类型的颜色
const getProcess = (processTypeLevel: number) => {
	const item = processTypeLevelOptions.find((d) => d.id === processTypeLevel);
	return item as any;
};
const getProcessTypes = () => {
	fetchProcessTypeListAll({ state: 20 }).then((res) => {
		processTypeOptions.value = res.data;
	});
};
getProcessTypes();
const handling = (item: any) => {
	emits('handling', props.siteData?.alarmId, item);
};
const handledetail = (id: string) => {
	router.push({ path: '/platform/basicDevice/facilityDetails', query: { id, type: '1' } });
};
</script>

<style lang="scss" scoped></style>
